<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <script>
            function formatJson() {
                PF('txtJson').jq.val(JSON.stringify(JSON.parse(PF('txtJson').jq.val()), null, 2));
            }
        </script>
    </ui:define>
    
	<ui:define name="title">
        Charts <span class="subitem">Custom JSON</span>
	</ui:define>

	<ui:define name="description">
        Chart can be created using raw JSON.
    </ui:define>

	<ui:param name="documentationLink" value="/components/chart" />
	<ui:param name="widgetLink" value="Chart" />

	<ui:define name="implementation">
		<h:form>
			<p:growl id="growl" showDetail="true" />

			<div class="card">
				<h5>Raw JSON</h5>
				<p:inputTextarea id="codeJson" widgetVar="txtJson" rows="15"
					styleClass="w-full" autoResize="false"
					value="#{chartView.json}" onblur="formatJson();"/>
					
				<p:commandButton id="update" styleClass="mt-2"
                                 value="Apply JSON and update chart" process="@form"
                                 update="@form:rawChart" icon="pi pi-refresh"/>
					
				<p:chart id="rawChart" value="#{chartView.json}" style="width: 100%; height: 500px;">
					<p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
				</p:chart>
			</div>
		</h:form>
	</ui:define>

</ui:composition>
